import { useEffect, useMemo, useState } from 'react';
import { View, useWindowDimensions, StatusBar } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import back from 'assets/Images/back.svg';
import { SvgXml } from 'react-native-svg';
import { navigationRef } from 'utils/naviRef';
import RealTime from './RealTime';
const overview = () => <View style={{ flex: 1 }}></View>;

export default ({
  navigation,
  route: { params },
}: RootStackScreenProps<'dynamic'>) => {
  const layout = useWindowDimensions();
  const [index, setIndex] = useState(0);

  const [routes] = useState([
    { key: 'overview', title: '总览' },
    { key: 'RealTime', title: '实况' },
    // {key: 'Dynamic', title: '动态'},
    // {key: 'feedback', title: '反馈'},
  ]);
  const renderScene = useMemo(() => {
    return SceneMap({
      overview,
      RealTime: () => <RealTime id={params.id}></RealTime>,
      feedback: RealTime,
    });
  }, []);
  return (
    <View
      style={{
        flex: 1,
        paddingTop: 36,
        backgroundColor: '#fff',
      }}>
      <TabView
        renderScene={renderScene}
        navigationState={{ routes, index }}
        renderTabBar={props => {
          return (
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                backgroundColor: '#fff',
                justifyContent: 'center',
                position: 'relative',
              }}>
              <SvgXml
                onPress={() => {
                  navigationRef.goBack();
                }}
                style={{ position: 'absolute', left: 24 }}
                {...{ width: 24, height: 24 }}
                xml={back}
              />
              <View
                style={{
                  width: '35%',
                  height: 50,
                }}>
                <TabBar
                  {...props}
                  activeColor="#0A59F7"
                  inactiveColor="rgba(0,0,0,0.8);"
                  indicatorStyle={{
                    backgroundColor: '#0A59F7',
                  }}
                  pressColor="#fff"
                  style={{
                    backgroundColor: '#fff',
                    flex: 1,
                    elevation: 0,
                  }}
                />
              </View>
            </View>
          );
        }}
        sceneContainerStyle={{
          backgroundColor: '#F6F7F9',
        }}
        initialLayout={{ width: layout.width }}
        onIndexChange={setIndex}></TabView>
    </View>
  );
};
